<template>
  <div>
    <van-nav-bar
      class="topbu"
      title="城市列表"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-index-bar :index-list="indexList">
      <van-index-anchor
        v-for="item in infolist"
        :key="item.leleer"
        :index="item.leleer"
        >{{ item.leleer }}
        <van-cell
          :title="sonitem"
          v-for="sonitem in item.label"
          :key="sonitem"
          @click="jupm(sonitem)"
        />
        <!-- <van-cell title="文本" />
        <van-cell title="文本" /> -->
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import { cityList, cityPopular } from '@/api/city'
export default {
  name: 'TabulationList',
  props: {},
  data () {
    return {
      indexList: ['#', '热'],
      infolist: [],
      id: ''
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    async jupm (name) {
      // console.log(1)
      const data = await cityList()
      // console.log(data)
      data.body.forEach(item => {
        if (name === item.label) {
          this.id = item.value
        }
      })
      this.$router.push({
        name: 'tabulation',
        params: { name, cityId: this.id }
      })
    }
  },
  async created () {
    const data = await cityList()
    console.log(data)
    const res = await cityPopular()
    // console.log(res)
    const pous = res.body.map(item => item.label)
    // console.log(pous)
    const pousArr = [{ leleer: '热门', label: pous }]
    const arrList = []
    data.body.forEach(item => {
      arrList.push(item.pinyin.split('')[0].toUpperCase())
    })

    const set = new Set(arrList.map(JSON.stringify))
    const uniqueArr = Array.from(set).map(JSON.parse).sort()
    const arr = []
    uniqueArr.forEach(item => {
      const obj = {}
      obj.label = []
      data.body.forEach(sonitem => {
        const big = sonitem.pinyin.split('')[0].toUpperCase()
        if (item === big) {
          obj.leleer = big
          obj.label.push(sonitem.label)
        }
      })
      arr.push(obj)
    })
    this.indexList = [...this.indexList, ...uniqueArr]
    // console.log(this.indexList)
    this.infolist = [
      { leleer: '当前城市', label: ['上海'] },
      ...pousArr,
      ...arr
    ]
    this.infolist[0].label = [this.$route.params.name]
  }
}
</script>

<style scoped lang="less">
.topbu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}
.van-index-bar {
  margin-top: 12vw;
}
</style>
